<template>
  <div>
    <div class="ui top attached segment" style="text-align: center">
      <h2 class="m-text-500">小伙伴们</h2>
    </div>
    <div class="ui attached segment">
      <div class="ui link three doubling cards">
        <a
          :href="item.website"
          target="_blank"
          rel="external nofollow noopener"
          class="card"
          :style="randomRGB()"
          v-for="(item, index) in friendList"
          :key="index"
          @click="addViews(item.nickname)"
        >
          <div class="image">
            <img :src="item.avatar" onerror="this.src = '/img/error.png'" />
          </div>
          <div class="content">
            <div class="header">{{ item.nickname }}</div>
            <div class="description">{{ item.description }}</div>
          </div>
        </a>
      </div>
    </div>
    <!--页面描述-->
    <div class="ui teal attached segment">
      <div class="typo content" v-viewer v-html="info.content"></div>
    </div>
    <!--评论-->
    <div class="ui bottom teal attached segment threaded comments">
      <CommentList
        :commentType="3"
        :relevantId="null"
        v-if="info.commentEnabled"
      />
      <h3 class="ui header" v-else>评论已关闭</h3>
    </div>
  </div>
</template>

<script>
import { getData, addViewsByNickname } from '@/api/friend'
import CommentList from '@/components/comment/CommentList'

export default {
  name: 'Friends',
  components: { CommentList },
  data() {
    return {
      friendList: [],
      bgColor: [
        '#1abc9c',
        '#2ecc71',
        '#3498db',
        '#9b59b6',
        '#34495e',
        '#f1c40f',
        '#e67e22',
        '#e74c3c',
        '#ee5a24',
        '#9980fa',
        '#8c7ae6',
        '#f79f1f'
      ],
      info: {
        content: '',
        commentEnabled: false
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      getData().then(res => {
        this.friendList = res.data.friendList
        this.info = res.data.friendInfo
      })
    },
    addViews(nickname) {
      addViewsByNickname(nickname)
    },
    randomRGB() {
      const index = Math.floor(Math.random() * this.bgColor.length)
      return { backgroundColor: this.bgColor[index] }
    }
  }
}
</script>

<style scoped>
.card .image {
  width: 70px !important;
  margin: 10px auto 0px;
  background: unset !important;
}

.card .image img {
  border-radius: 100% !important;
  width: 70px !important;
  height: 70px !important;
}

.card .content {
  text-align: center;
  padding: 10px 14px !important;
  border-top: 0 !important;
}

.card .content * {
  color: #fff !important;
}

.card .content .header {
  font-size: 16px !important;
}

.card .content .description {
  font-size: 12px !important;
}

.card .content .description {
  margin-top: 5px !important;
  margin-bottom: 7px;
}
</style>
